<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>课程优化界面</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}" href="../static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_957101_qlq7i73r14.css">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css">
    
</head>
<body class="contain">
	<header>
		<span class="header_span">个人中心</span>
		<ul class="nav nav-tabs myul" style="float: right;">
			<li class="active" style="float: left;"><a href="">首页</a></li>
			<li ><a href="#">活动</a></li>
			<li><a href="#">统计</a></li>
			<li><a href="#">资料</a></li>
			<li><a href="#">通知</a></li>
			<li><a href="#" th:href="@{/Workindex}">作业</a></li>
			<!--语法问题对url的处理是通过@{}来使用-->
			<li><a href="#">考试</a></li>
			<li><a href="#">讨论</a></li>
			<li><a href="#">管理</a></li>
		</ul>
	</header>
	<section class="body">
		<span id="course_name" th:text="${thecourse.courseName}">默认班级</span>
		<span><a href="javascript:void(0)"  data-toggle="modal" data-target="#myModa2">重命名</a></span>
		<hr style="border:2px solid black;margin: 0 auto">
		<span>该班级共有</span><span th:text="${thecoursenumber}">xxx</span><span>学生</span>
		<button class="section_AddDerive" id="ouputexcel">导出名单</button>
		<button class="section_AddDerive" data-toggle="modal" data-target="#myModal">
					添加学生	
		</button>
		<button class="section_AddDerive" id="dataAddStudent">
			数据库添加学生
		</button>
		<div>	
		<p>班级设置 <i class="iconfont icon-moreunfold"></i> 
		</p>
			<div>
				<span>班级人数上限<input type="text" id="peopleLimit"  th:value="${nowpeople}"/>学生</span>
				<a href="javascript:void(0)" id="savePeopleLimit">保存</a>
				<p><input type="checkbox" name="" checked/>公共班级</p>
				<p><input type="checkbox" name=""/>允许学生退课</p>
				<p><input type="checkbox" name=""/>开通本课程邮件通知</p>
				<p><input type="checkbox" name=""/>对学生隐藏该班级</p>
				<p><input type="checkbox" name=""/>忽视视频托找</p>
				<p><input type="checkbox" name=""/>开启复习模式</p>
				<p><input type="checkbox" name=""/>显示第三方答疑</p>
				<p>
					开放报名设置:
					<input type="radio" name="is_quit" checked/>关闭报名
					<input type="radio" name="is_quit"/>
					本校开放
					<input type="radio" name="is_quit"/>
					全网开放
				</p>
				<br>
				<br>
				<span>
					章节开放设置:
					<a href="">全部开放</a>
					<a href="">全部关闭</a>
					<a href="">全部闯关模式</a>
				</span> 
				 <p>
				 	<span>班级开放</span>
				 	<input  type="datetime-local" value="2018-12-24T13:59:59" />
				 	<span>————</span>
				 	<input  type="datetime-local" value="2018-12-24T13:59:59" />
				 	<a href="">保存</a>
				 </p>
			</div>
		</div>
	</section>
	<section id="模态框">

		<!-- 添加学生模态框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
							<!-- 显示图标的额外作用 -->
						</button>
						<h4 class="modal-title" id="myModalLabel">
							添加学生
						</h4>
					</div>
				 	<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
	<li class="active">
		<a href="#function1" data-toggle="tab">
			 手动添加
		</a>
	</li>
	<li><a href="#function2" data-toggle="tab">
		从学生库添加
	</a></li>
	<li><a href="#function3" data-toggle="tab">
		批量导入
	</a></li>
</ul>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="function1" style="text-align: center;">
		<p style="margin-top: 20px">输入学生、邮箱、手机、账号、即可添加学生</p>
		姓名:<input type="text" name="student_name" style="margin-top: 10px"><br>
		账号:<input type="text" name="student_account" style="margin-top: 20px" id="student_account"><br>
		<button id="add_student1" type="button" class="btn btn-primary" style="padding:10px 50px;margin-top: 20px">
			添加
		</button>
	</div>
	<div class="tab-pane fade" id="function2">
		<p>
			<!-- 点击ifram页面地址改变 -->
			<!-- <input type="button" id="iframtest" value="ifram测试"> -->
			<!-- 未加入ifram前的代码 -->
				<!-- <select>
					<option>1</option>
				</select>
				<select>
					<option>2</option>
				</select>
				<select>
					<option>3</option>
				</select>
				<input type="text" name="" placeholder="the student name">
				<button>search</button>
				<div style="height: 200px;overflow-y: scroll;">
					<table style=" border: 1px solid red;width: 100%">
						<tr>
							<th>序号</th>
							<th>账号</th>
							<th>名字</th>
						</tr>
						<tr>
							<td><input type="checkbox" name=""><span>顺序</span></td>
							<td>12312312</td>
							<td>打算哒</td>
						</tr>
					</table>
				</div>
				<input type="checkbox" name="">选中当前页
				<span style="float: right;">
					<button>首页</button>
					<button>上一页</button>
					<button>下一页</button>
				</span> -->
				<iframe id="NoPermissioniframe" width="100%" height="100%" frameborder="1" src="courseAddStudent.html" th:src="@{test.html}"></iframe>
				
		</p>
	</div>
	<div class="tab-pan fade" id="function3">
		<form class="form-horizontal" id="batchImport" enctype="multipart/form-data" method="post">
        <input class="form-input" type="file" name="filename"></input>
        <br/>
        <button id="batchImport_button"  class="btn">开始导入</button>
    </form>
    <span>导入的格式为excel第一行为标题 数据不导入,导入数据为两列 <br>第一列为学生姓名,第二列为学生名字</span>
	</div>
</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>



		<!-- 重命名的模态框 -->
		<div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabe2" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabe2">
							修改课程名字
						</h4>
					</div>
				 	<div class="modal-body">
				 		课程名字：<input type="text" id="rename_text" name="">
				 		<button id="rename_button" name="rename_button">提交</button>
				 		<!-- input 有name属性 用于对提交到服务器后的表单数据进行获取 -->
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>


	</section>
	<footer>
           <p style="text-align: center">Copyright ©	杭州电子科技大学信息工程学院</p>
    </footer>
<script th:src="@{/js/jquery-3.3.1.js}" src="../static/js/jquery-3.3.1.js"></script>
<script th:src="@{/js/bootstrap.js}" src="../static/js/bootstrap.js"></script>
<script type="text/javascript">
	$(function(){
		$("#rename_button").click(function(){
			var text=$(this).prev().val();
			// alert(text);
			$.ajax({
				url:"rename",
				type:"POST",
				async:false,
				data:{
					"text":text
				},
				success:function(data){
					alert("回调成功");
					$("#course_name").html(data);
				},
				error:function(){
					alert("回调失败");
				}
			});
		});
		$("#add_student1").click(function(){
			var student_account = $(this).prevAll("input").eq(0).val();
			var student_name = $(this).prevAll("input").eq(1).val();	
			console.log("student_account"+student_account);
			console.log("student_name"+student_name);
			$.ajax({
				url:"add_student",
				type:"POST",
				async:false,
				data:{
					"student_account":student_account,
					"student_name":student_name
				},
				success:function(data){
					alert("回调成功");
					console.log(data);
				},
				error:function(){
					alert("回调失败");
				}
			})
		});
		$("#batchImport_button").click(function(){
		    alert("点击了");
		    //我又去，这个#忘记写了 我真的烦搞了三个小时了妈蛋个鸡鸡
			var formData=new FormData($("#batchImport")[0]);
			$.ajax({
				//我去 妈的url写成了path妈蛋！！！
                url:"batchImport",
				type:"POST",
				async:false,
				processData:false,
				contentType:false,
				data:formData,
				success:function(data){
					alert("回调成功");
					if(data=="success")
						alert("添加数据成功");
					else
						alert("批量添加失败");
				},
				error:function(data){
					alert("回调失败");
				}
				})
		});
		$("#ouputexcel").click(function(){
			window.location.href=("/ouputexcel");
		});
		$("#dataAddStudent").click(function(){
			window.location.href=("/dataAddStudent");
		})
	});
	$("#savePeopleLimit").click(function(e){
		var number=$("#peopleLimit").val();
		console.log("number"+number);
		e.preventDefault();
		$.ajax({
			url:"savePeopleLimit",
			type:"POST",
			async:false,
			data:{
				"limit_number":number
			},
			success:function(data){
				if(data=="yes"){
					console.log("添加成功");
				alert("添加课程上限人数成功");
				}
				else{
				alert("已有人数超过课程人数上限");
				}
				
			},
			error:function(data){
				console.log("点击失败");
			}
		})
	})
</script>
</body>
</html>